<template>
  <div class="drop_down mgr-20">
    <el-dropdown @command="handleCommand">
      <el-button type="primary" class="color-0">
        {{$t('messageLang.chooseText')}}<i class="el-icon-arrow-down el-icon-caret-bottom mgl-20"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="ETH">ETH</el-dropdown-item>
        <el-dropdown-item command="WETH">WETH</el-dropdown-item>
        <el-dropdown-item command="Polygon">Polygon</el-dropdown-item>
        <el-dropdown-item command="Matic" disabled>Matic</el-dropdown-item>
        <el-dropdown-item command="IMN" divided>IMN</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  props: ['text'],
  data () {
    return {
    }
  },
  mounted () {
    console.log('ok')
  },
  methods: {
    handleCommand: function (command) {
      this.$message('click on item ' + command)
      this.text = command
    }
  }
}
</script>
<style lang="less" scoped>
  .drop_down {
    position: relative;
    .el-dropdown {
      width: 100%;
      button {
        width: 100%;
        span {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: space-between;
          align-items: center;
        }
      }
      /deep/.el-button--primary {
        background: #7de9ff!important;
        border: none;
        span {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
</style>
